<template>
  <div class="take-orders">
    <!--卡片顶部菜单-->
    <template>
      <el-tabs v-model="activeName" @tab-click="handleClick" :stretch="true">
        <el-tab-pane label="外卖" name="1"></el-tab-pane>
        <el-tab-pane label="自助点餐" name="2"></el-tab-pane>
        <el-tab-pane label="预定" name="3"></el-tab-pane>
      </el-tabs>
    </template>
    <el-card class="box-card" v-for="(item, card) in orderList">
      <!--卡片主体部分-->
      <el-row :gutter="24">
        <!--卡片主体：左部分-->
        <el-col :span="12">
          <div v-for="(it, index) in item.orderDetailsList">
            <el-row :gutter="24">
              <el-col :span="6">
                <img :src="it.dishImg" width="60">
              </el-col>
              <el-col :span="6">{{ it.dishName }}</el-col>
              <el-col :span="6">x{{ it.dishNum }}</el-col>
              <el-col :span="6"><span>￥ {{ it.dishPrice.toFixed(2) }}</span></el-col>
            </el-row>
          </div>
        </el-col>
        <!--卡片主体：右部分-->
        <el-col :span="12">
          <el-row :gutter="24">
            <el-col :span="14">
              <div style="margin-top: 20px">
                <p v-show="activeName==1">送货地址：四川省成都市高新区孵化园</p>
                <p v-show="activeName==1">客户姓名：{{ item.customerUsername }}</p>
                <p v-show="activeName==1">联系方式：{{ item.customerPhone }}</p>
                <p v-show="activeName==1">配送时间：<b style="color: lightblue">{{ item.gmtCreate }}</b></p>
                <p v-show="activeName==2">就餐方式：<b>堂食</b></p>
                <p v-show="activeName==2">桌号：{{ item.tableName }}</p>
                <p v-show="activeName==3">预定种类：<b>订餐</b></p>
                <p>下单时间：{{ item.gmtCreate }}</p>
                <p v-show="activeName==3">预约时间：{{ item.gmtCreate }}</p>
                <p v-show="activeName==3">预约人：{{ item.customerUsername }}</p>
                <p v-show="activeName==3">联系电话：{{ item.customerPhone }}</p>
              </div>
            </el-col>
            <el-col :span="10">
              <p>订单金额：</p>
              <b style="font-size: 30px">￥ {{ item.totalPrice }}</b>
            </el-col>
          </el-row>
          <el-row :gutter="24">
            <el-col :span="12">
              <div style="margin-top: 25px">
                <el-button type="primary" round @click="takeOrder(item)">接单</el-button>
                <el-button type="primary" round @click="cancelOrder(item)">拒绝</el-button>
              </div>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
      <!--卡片顶部-->
      <div slot="header" class="clearfix">
        <el-row :gutter="24">
          <el-col :span="12">点餐信息</el-col>
          <el-col :span="12">客户信息</el-col>
        </el-row>
      </div>
      <!--卡片右上角-->
      <div class="header-right-corner">
        <span class="taking" v-show="orderInfoVisible==1">待接单</span>
      </div>
    </el-card>
    <div style="margin: 10px 0 0 0; height: 30px;">
      <el-pagination
          align="center"
          @current-change="changePage"
          layout="total, prev, pager, next"
          prev-text="上一页"
          next-text="下一页"
          :current-page="currentPage"
          :page-size="pageSize"
          :total="total">
      </el-pagination>
    </div>
  </div>
</template>
<script>
import BaseUrl from "@/http/BaseUrl";
import TokenAxios from "@/http/TokenAxios";

export default {
  data() {
    return {
      activeName: '2',
      index: '',
      orderUpdate: {payChannel: 0,orderState:'',takingStatus:''},
      orderInfoVisible: 1,
      orderList:[],
      orderDetails: [],
      currentPage: 1,
      pageSize:1,
      total: 0

    }
  },
  methods: {
    changePage(page){//分页选择器改变
      this.$router.push('?page='+page);
      this.loadOrderList();
    },
    handleClick(tab) {//卡片顶部菜单栏点击
      let url = this.$route.fullPath;
      if (url.indexOf("?")!==-1){
        this.$router.push('');
      }
      this.loadOrderList();
    },
    loadOrderList(){//加载订单
      let page = this.$router.currentRoute.query.page;
      if (!page) {
        page = 1;
      }

      let url = BaseUrl.FRONT_ORDER+'/orders/search/by-method-and-state';
      console.log('url:'+url)

      let orderQueryInfo = {
        takingStatus: 1,
        orderState: 0,
        orderMethod: this.activeName,
        pageNum: page
      }
      TokenAxios.post(url,orderQueryInfo).then((response) => {
        let jsonResult = response.data;
        if (jsonResult.state == 20000) {
          this.orderList = jsonResult.data.list;
          this.total = this.orderList.length;
          this.pageSize = jsonResult.data.pageSize;
          this.currentPage = jsonResult.data.currentPage;
        } else {
          this.$message({
            type: 'error',
            duration:500,
            message: jsonResult.message
          });
        }
      });
    },
    updateOrder(order){//更新订单状态
      let url = BaseUrl.FRONT_ORDER+'/orders/'+order.id+'/update';
      console.log('url:'+url)

      TokenAxios.post(url,this.orderUpdate).then((response) => {
        let jsonResult = response.data;
        if (jsonResult.state == 20000) {
          this.$message({
            duration:500,
            type:"success",
            message:'操作订单成功！'
          });
          this.loadOrderList();
        } else {
          this.$message({
            type: 'error',
            duration:500,
            message: jsonResult.message
          });
        }
      });
    },
    takeOrder(key){//点击接单按钮
      let index = parseInt(this.activeName);
      this.orderUpdate.orderState = 2;//设置订单状态为：已接单制作中
      if (index==3){
        this.orderUpdate.orderState = 1;//设置订单状态为：已接单（待客户确认预约）
      }
      this.updateOrder(key);
    },
    cancelOrder(key){//点击拒绝订单按钮
      this.$confirm('此操作将永久删除此订单, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let url = BaseUrl.FRONT_ORDER+'/orders/'+key.id+'/delete';
        console.log('url:'+url)
        this.axios.get(url).then((response) => {
          let jsonResult = response.data;
          if (jsonResult.state == 20000) {
            this.loadOrderList();
          } else {
            this.$message({
              type: 'error',
              duration:500,
              message: jsonResult.message
            });
          }
        });
        this.$message({
          type: 'success',
          duration:500,
          message: '已拒绝订单！'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          duration:500,
          message: '已取消操作！'
        });
      });

    },
  },
  mounted() {
    this.loadOrderList();
  }
}
</script>
<style scoped lang="less">
.take-orders {
  font-size: 20px;
  button{
    width: 120px;
    font-size: 20px;
  }
}

/deep/ .el-tabs {
  .el-tabs__item {
    font-size: 20px !important;
  }
}
.box-card{
  position: relative;
  overflow: hidden;
}
.header-right-corner {
  width: 150px;
  height: 150px;
  position: absolute;
  //background-color: #048816;
  top: -75px;
  right: -75px;
  transform: rotate(45deg);

  .taking {
    position: absolute;
    bottom: 0;
    display: block;
    font-size: 22px;
    color: #ffffff;
    background: #7e9a07;
    width: 150px;
    text-align: center;
  }
}

</style>